<template>
  <n-grid ref="progressGridRef">
    <n-grid-item :span="24">
      <n-progress
        type="line"
        :percentage=" updateProgress.progress "
        :height="30"
        :border-radius="5"
        :fill-border-radius="0"
        :indicator-placement="'inside'"
        :processing="updateProgress.progress < 100"
      />
      <n-h6>
        {{updateProgress.message}}
      </n-h6>
    </n-grid-item>
  </n-grid>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from "vue";
import {taskinfoController} from "@/api/controller/taskinfo/taskinfoController";
import {sysUpdateController} from "@/api/controller/sysUpdateController";

let timer = ref(null);
const maxQueryTime = 5 * 60 * 1000; // 60 seconds
let startTime = Date.now();
const updateProgress = ref({
  progress: 0,
  message: '正在获取进度,请稍等...'
})


onMounted(() => {
  timer.value = setInterval(() => {
    if (Date.now() - startTime > maxQueryTime ||  updateProgress.value.progress == 100){
      clearInterval(timer.value);
      timer.value = null;
    } else {
      getCommonProgress();
    }
  }, 1000);
})


onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
})

const getCommonProgress = () => {
  sysUpdateController.getUpdateProgress().then(res=>{
    if (res.code == 200) {
      updateProgress.value = res.data
    }
  })
}
</script>
